<template>
  <div class="slider" ref="slider">
    <div class="slider-group" ref="sliderGroup">
       <slot></slot>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import { addClass } from '@/assets/js/dom'

export default {
  name: "Slider",
  data() {
    return {

    }
  },
  props: {
    loop: {
      type: Boolean,
      default: true
    },
    autoplay: {
      type: Boolean,
      default: true
    },
    interval: {
      type: Number,
      default: 4000
    }
  },
  methods: {
    _setSliderWidth(isResize) { // 计算宽度
      this.children = this.$refs.sliderGroup.children

      let width = 0
      let sliderWidth = this.$refs.slider.clientWidth

      for(let i=0; i<this.children.length; i++) {
        let child = this.children[i]
        addClass(child, "slider-item")

        child.style.width = sliderWidth + "px"
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
  .slider
    min-height 1px
    .slider-group
      overflow hidden
      position relative
      white-space nowrap
      
</style>
